<template>
  <div>
    <hot-table  :settings="hotSettings" :data="rawData" ref="hottable"></hot-table>
  </div>
</template>

<script>
import { HotTable } from '@handsontable/vue'
import 'handsontable/dist/handsontable.full.css'
import 'handsontable/languages/zh-CN'

export default {
  beforeMount () {
    console.log('beforeMount')
    this.stateSheetData()
  },
  data () {
    return {
      rawData: [],
      formalData: {},
      hotSettings: {
        rowHeaders: true,
        colHeaders: true,
        manualRowResize: true,
        manualColumnResize: true,
        columnSorting: false,
        filters: true,
        dropdownMenu: false,
        contextMenu: true,
        customBorders: [],
        fixedRowsTop: 1,
        minSpareRows: 5,
        minSpareCols: 2,
        language: 'zh-CN',
        licenseKey: 'non-commercial-and-evaluation',
        afterChange: this.rawDataChange,
        afterRemoveCol: this.rawDataChange,
        afterRemoveRow: this.rawDataChange
      }
    }
  },
  computed: {
  },
  methods: {
    stateSheetData () {
      console.log(this.$store.state.activeArrayIndex)
      console.log(this.$store.state.insideActiveArrayIndex)
      if (this.$store.state.insideActiveArrayIndex !== -1) {
        var type = this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent.type
        console.log(type)
        if (type !== 'ck') {
          var ini = this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent.detail.sheetData
          console.log(ini)
          this.rawData = JSON.parse(JSON.stringify(ini))
        }
      }
    },
    rawDataChange: function () {
      console.log('rawDataChange')
      var nr = this.$refs.hottable.hotInstance.countRows() - this.$refs.hottable.hotInstance.countEmptyRows(true)
      var nc = this.$refs.hottable.hotInstance.countCols() - this.$refs.hottable.hotInstance.countEmptyCols(true)
      var data = this.$refs.hottable.hotInstance.getData(0, 0, nr - 1, nc - 1)
      this.formalData = { data, nr, nc }
    }
  },
  watch: {
    formalData (newVal) {
      console.log('formalData变化了')
      this.$store.commit('updateDetailSheetData', newVal)
    }
  },
  components: {
    HotTable
  }
}
</script>

<style scoped>
    p {
      font-size:40px;
      font-weight: 900;
      text-shadow: -1px -1px 1px #333, 1px 1px 1px #fff;
      color: rgb(134, 178, 196);
    }
    h1 {
  /* WebKit (Safari/Chrome) Only */
  -webkit-text-stroke: 1px black;
  /* If we weren't using text-shadow, we'd set a fallback color
     and use this to set color instead
    -webkit-text-fill-color: white; */
  color: white;
  text-shadow:
    3px 3px 0 #000,
    /* Simulated effect for Firefox and Opera
       and nice enhancement for WebKit */
   -1px -1px 0 #000,
    1px -1px 0 #000,
   -1px  1px 0 #000,
    1px  1px 0 #000;
}
</style>
